<template>
	<el-container>
		<el-main class="nopadding" v-loading="loading">
			<div style="width:1366px;height:100%;">
				<ta-designer ref="designer" :config="config">
					<template #handle>
						<el-button icon="Promotion" type="success" size="small" @click="handleSave" plain>保存</el-button>
					</template>
				</ta-designer>
			</div>
		</el-main>
	</el-container>
</template>

<script>
	export default {
		components: {

		},
		mounted() {
			this.getData();
		},
		data() {
			// https://view.form-create.com/hidden-item
			return {
				loading: true,
				form: {
					id: "",
					page_config: [],
					page_name: '',
				}
			};
		},
		methods: {
			getData() {
				var {
					id
				} = this.$route.query;
				if (id) {
					this.loading = true;
					this.$API.system.pageDesign.show.get({
						id: id
					}).then(res => {
						this.form = res.data;
						this.$refs.designer.setRule(this.form.page_config.rule);
						this.$refs.designer.setOption({
							...this.form.page_config.option,
							...{
								formName: this.form.page_name
							}
						});
					}).finally(() => {
						this.loading = false
					})
				}
			},
			handleSave() {
				if (this.loading == true) return;

				this.loading = true;
				var config = {
					option: this.$refs.designer.getOption(),
					rule: this.$refs.designer.getRule(),
					// json: JSON.parse(this.$refs.designer.getJson())
				};
				if (config.option.formName) {
					this.form.page_name = config.option.formName;
				}
				this.form.page_config = config;
				this.$API.system.pageDesign.update.post(this.form).then(res => {
					if (res.code == 0) {
						this.$message.success("保存成功")
					} else {
						this.$alert(res.msg, "提示", {
							type: 'error'
						})
					}
				}).finally(() => {
					this.loading = false;
				})
			}
		}
	}
</script>

<style scoped>
	/* https://www.zxlee.cn/github/uni-z-paging/phone.png */
</style>
